<template>
	<view class="store-list">
		<view class="store-item"  v-for="(item,index) in privatesList" :key="index" @click="goDetail(item)">
			<image class="store-image" :src="$util.img(item.goods_image)" mode="aspectFill" lazy-load/>
			<view class="store-info">
				<view class="text-bold ellipsis-2 m-b-10 name">{{item.goods_name}}</view>
				<view class="flex m-b-20">
					<view class="m-r-10"
						v-for="(tag,tagindex) in item.goods_label" 
						:key="tagindex"
						:class="{'tags1': tagindex % 2 === 0, 'tags2': tagindex % 2 !== 0}"
					>
						{{tag}}
					</view>
				</view>
				<view class="flex-between">
					<view class="font-32 c-origin flex-y-baseline text-bold">
					  <text class="font-20">¥</text>{{item.price}}
					</view>
					<view class="make">立即预约</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"privates",
		props: {
			privatesList: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goDetail(item) {
				this.$util.redirectTo('/otherpages/food/privateRefDetail?id='+item.goods_id)
			},
		}
	}
</script>

<style lang="scss" scoped>
.store-list {
	.store-item {
		position: relative;
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		
		.store-image {
			width: 216rpx;
			height: 216rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
		}
		
		.store-info {
			width: 64%;
		}
		
		.name {
			height: 78rpx;
			line-height: 1.4;
		}
		
		.tags1 {
			font-size: 20rpx;
			color: #FF6619;
			border-radius: 10rpx;
			background: #FBEDE6;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}
		.tags2 {
			font-size: 20rpx;
			color: #0C7EFF;
			border-radius: 10rpx;
			background: #E6F2FF;
			padding: 0 10rpx;
		}
		
	}
	.make {
		width: 139rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background-color: $color-title2;
		color: #fff;
		font-size: 24rpx;
		border-radius: 60rpx;
	}
}


  .iconfont  {
  	  font-size: 24rpx;
  }
</style>